<template>
  <aside class="menu">
    <div
      class="menu__item"
      :key="index"
      @click="item.event"
      v-for="(item, index) in menuList"
    >
      <i class="resume" :class="`resume-${item.icon}`" />
      <span>{{ item.label }}</span>
    </div>
    <teleport to="#app">
      <mod-setting v-model="visible.isShowMod" />
      <theme-setting v-model="visible.isShowTheme" />
    </teleport>
  </aside>
</template>

<script>
import ModSetting from "./mod-manage";
import ThemeSetting from "./theme-setting";
import { reactive } from "vue";
export default {
  name: "index",
  components: { ModSetting, ThemeSetting },
  setup() {
    const visible = reactive({
      isShowMod: false,
      isShowTheme: false,
    });
    const handleOnModule = () => (visible.isShowMod = true);
    const handleOnTemplate = () => {};
    const handleOnTheme = () => (visible.isShowTheme = true);
    const menuList = [
      {
        event: handleOnModule,
        icon: "module",
        label: "管理模块",
      },
      {
        event: handleOnTemplate,
        icon: "template",
        label: "更换模版",
      },
      {
        event: handleOnTheme,
        icon: "theme",
        label: "主题设置",
      },
    ];
    return {
      visible,
      menuList,
    };
  },
};
</script>

<style scoped lang="less">
.menu {
  width: 50px;
  background-color: lightskyblue;
  transition: width 0.5s;
  z-index: 90;

  &:hover {
    width: 140px;
  }

  div {
    padding: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: hidden;
    cursor: pointer;

    &:hover {
      background-color: rgba(0, 0, 0, 0.2);
    }

    i {
      color: white;
      font-size: 15px;
      margin-right: 15px;
    }

    span {
      color: white;
      font-size: 15px;
      white-space: nowrap;
    }
  }
}
</style>
